const webpack = require('webpack')
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
  mode: 'development', // 生产环境模式
  devtool: 'eval-cheap-module-source-map', // 使用sourcemap
  devServer: {
    contentBase: './public',
    port: '8080',
    hot: true,
    proxy: {
      // 代理防跨域
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': ''
        },
        // 不能使用 localhost：8080作为请求 github 的主机名
        changeOrigin: true
      }
    }
  },

  optimization: {
    sideEffects: true, // 手动开启检查模块是否含有副作用
    // 模块只导出被使用的成员 (负责标记 '枯树叶' - dead-code)
    usedExports: true,
    // 压缩输出结果 (把 '枯树叶' - dead-code 摇掉)
    minimize: true,
    // 尽可能合并每一个模块到一个函数中
    concatenateModules: true,
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 载入HMR插件，开启hmr功能
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css'
    })
  ]
})
